<template>
    <!-- 侧边栏 -->
    <div class="sidebar">
      <!-- 影像查询表单 -->
       <el-form :model="queryForm" ref="queryForm">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">行政区选择</el-menu-item>
            <el-menu-item index="2">自定义区域</el-menu-item>
        </el-menu> 
    <!-- 显示输入框 -->
    <div v-show="activeIndex === '1'">
        <el-dropdown @show="handleDropdownShow" trigger="click" placement="bottom-start">
             <el-select v-model="queryForm.area" placeholder="请选择行政区" />
            <el-dropdown-menu slot="dropdown" >
            <!-- 表格的列定义 -->
                <el-table :data="tableData" style="width: 100%" @cell-click="handleCellClick">
                    <el-table-column prop="col1" label="A-G"></el-table-column>
                    <el-table-column prop="col2" label="H-Q"></el-table-column>
                    <el-table-column prop="col3" label="Q-Z"></el-table-column>
                </el-table>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <div v-show="activeIndex === '2'">
        <el-input readonly placeholder="点击下方按钮进行绘制" />
       <!-- 选择绘制类型 -->
        <el-row class="draw-icons">
          <el-col :span="4">
            <div class="draw-option" @click="selectDrawType('Point')">
              <i class="el-icon-location-outline"></i>
              <span>点</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="draw-option" @click="selectDrawType('LineString')">
              <i class="el-icon-minus"></i>
              <span>线</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="draw-option" @click="selectDrawType('Polygon')">
              <i class="el-icon-house"></i>
              <span>多边形</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="draw-option" @click="selectDrawType('Circle')">
              <i class="el-icon-refresh"></i>
              <span>圆形</span>
            </div>
          </el-col>
        </el-row>
    </div>
    <hr>
    <!-- 传感器类型选择 -->
    <div class="sensor-selection">
      <div class="label">传感器选择</div>
        <el-dropdown @show="handleSensorDropdownShow" trigger="click">
            <el-select placeholder="请选择传感器类型" v-model="sensorInputValue"/>
            <el-dropdown-menu slot="dropdown">
                <!-- 使用 el-checkbox-group 和 el-checkbox 来实现多选 -->
                <el-checkbox-group v-model="queryForm.sensor" @change="handleSensorChange">
                    <el-checkbox v-for="sensor in sensorTableData" :key="sensor.label" :label="sensor.value">
                        {{ sensor.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <hr>
    <!-- 数据类型选择 -->
      <div class="datatype-selection">
        <div class="label">载荷选择</div>
        <el-checkbox-group v-model="queryForm.types">
          <!-- 根据传感器类型动态显示载荷选择 -->
          <el-checkbox v-for="payload in currentPayloadOptions" :key="payload.label" :label="payload.value">{{ payload.label }}</el-checkbox>
        </el-checkbox-group>
      </div>
    <hr>
    <div class="time-selection">
        <div class="label">采集时间</div>
            <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            style="width: 98%"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            ></el-date-picker>
        </div>
    <hr>
        <!-- 查询按钮 -->
        <el-button type="primary" @click="submitQuery" class="query-button">查询</el-button>
    </el-form>

    </div>
</template>

<script>
import { EventBus } from '../../EventBus';
import axios from 'axios';
export default {
  data() {
    return {
        showResultSidebar: false,
        sensorInputValue: '',
        queryForm: {
        area: '', // 选择的行政区项
        sensor: [], // 将 sensor 改为数组
        types: [], // 选择的数据类型（PMS、WFV）
        drawnFeatures: [], // 存储绘制的要素信息
        dateRange: [], // 使用数组来存放开始和结束日期
        },
        drawType: 'Point', // 默认绘制类型为点
        activeIndex: '1', // 默认激活的菜单项
        area: null, // 选择的行政区项
        tableData: [ // 表格数据
        { id: 1, col1: '安顺市', col2: '六盘水市', col3: '黔西南布依族苗族自治州' },
        { id: 2, col1: '毕节市', col2: '黔东南苗族侗族自治州', col3: '铜仁市' },
        { id: 3, col1: '贵阳市', col2: '黔南布依族苗族自治州', col3: '遵义市' },
        ],
        sensorTableData: [
        { label: '高分1号(GF-1)', value: 'GF1' },
        { label: '高分2号(GF-2)', value: 'GF2' },
        { label: '高分3号(GF-3)', value: 'GF3' },
          { label: '高分5号(GF-5)', value: 'GF5' },
        { label: '高分6号(GF-6)', value: 'GF6' },
          { label: '高分7号(GF-7)', value: 'GF7' },
        { label: 'Landsat-8', value: 'LANDSAT_8' },
        { label: 'Sentinel-2A', value: 'Sentinel-2A' },
        { label: 'Sentinel-2B', value: 'Sentinel-2B' },
        ],
        selectedLocation: '',
        payloadOptions: {
        GF1: [
          { label: 'GF1-PMS1', value: 'GF1-PMS1' },
          { label: 'GF1-PMS2', value: 'GF1-PMS2' },
          { label: 'GF1-WFV1', value: 'GF1-WFV1' },
          { label: 'GF1-WFV2', value: 'GF1-WFV2' },
          { label: 'GF1-WFV3', value: 'GF1-WFV3' },
          { label: 'GF1-WFV4', value: 'GF1-WFV4' },
        ],
        GF2: [
        { label: 'GF2-PMS1', value: 'GF2-PMS1' },
        ],
        GF3: [
        { label: 'GF3-KSC', value: 'GF3-KSC' },
        { label: 'GF3-MYC', value: 'GF3-MYC' },
        { label: 'GF3-SYC', value: 'GF3-SYC' },
        ],
          GF5: [
            { label: 'GF5_VIMS', value: 'GF5_VIMS' },
          ],
          GF6: [
            { label: 'GF6-PMS', value: 'GF6-PMS' },
            { label: 'GF6-WFV', value: 'GF6-WFV' },
          ],
        GF7: [
          { label: 'GF7-BWD', value: 'GF7-BWD' },
        ],
        LANDSAT_8: [
        { label: 'Landsat-8', value: 'LANDSAT_8-OLI_TIRS' },
        ],
        'Sentinel-2A': [
        { label: 'Sentinel-2A', value: 'Sentinel-2A-S2MSI1C' },
        ],
        'Sentinel-2B': [
        { label: 'Sentinel-2B', value: 'Sentinel-2B-S2MSI1C' },
        ],
      },
    };
  },
  computed: {
    currentPayloadOptions() {
        const sensors = this.queryForm.sensor;
        let options = [];
        sensors.forEach(sensor => {
            if (this.payloadOptions[sensor]) {
                options = options.concat(this.payloadOptions[sensor]);
            }
        });
        return options;
    },
  },
  mounted() {
    // 监听事件总线中传递的绘制要素信息
    EventBus.$on('drawn-feature', (featureInfo) => {
      // 添加绘制的要素信息到 queryForm 中
      this.queryForm.drawnFeatures.push(featureInfo);
    });
  },

  methods: {
    submitQuery() {
      // 发送请求获取数据
      // console.log('Query Form:', this.queryForm);
      // axios({
      //   method: 'POST',
      //   url:'http://127.0.0.1:3000/query',

      // })
      // 清除 wfsSource 图层
      EventBus.$emit('clear-wfsSource');
      // axios.post('http://127.0.0.1:83/query', this.queryForm)
      axios.post('/query', this.queryForm)
        .then(response => {
          // 触发事件，将数据传递给 queryshow 组件
          // console.log(response.data);
          EventBus.$emit('update-table-data', response.data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
      this.showResultSidebar=true
      EventBus.$emit('update-show-result-sidebar', this.showResultSidebar);
      // console.log(this.queryForm.drawnFeatures)
      
    },
    handleSelect(index) {
      this.activeIndex = index;
      // 重置选择的行政区项
      this.queryForm.area = null;
    },
    handleDropdownShow() {
      // 下拉框显示时，重置选择的项
      this.queryForm.area = '';
    },
    handleCellClick(row, column, cell, event) {
        this.queryForm.area = row[column.property];
        // 隐藏下拉框
        this.dropdownVisible = false;
    },
    handleSensorDropdownShow() {
    // 下拉框显示时的处理
        this.queryForm.sensor = [];
    },
    handleSensorCellClick(row,column, cell, event) {
    // 点击表格单元格时将数据设置到输入框中
        this.queryForm.sensor = row[column.property];
        // 隐藏下拉框
        this.sensorDropdownVisible = false;
        
    },
    // 处理传感器选择变化
    handleSensorChange(selectedSensors) {
    // 更新传感器选择
    this.queryForm.sensor = selectedSensors;
    // 更新传感器输入框的值
    this.sensorInputValue = selectedSensors.join(', ');

    // 遍历所有传感器
    Object.keys(this.payloadOptions).forEach(sensor => {
        // 如果当前传感器不在选择的传感器列表中
        if (!selectedSensors.includes(sensor)) {
            // 过滤掉该传感器对应的所有载荷
            this.queryForm.types = this.queryForm.types.filter(payload => {
                return !this.payloadOptions[sensor].some(option => option.value === payload);
            });
        }
    });
    },
    // 处理数据类型多选框选择变化
    handleDataTypesChange(value) {
      this.queryForm.types = value;
    },
    selectDrawType(drawType) {
      // 发送事件通知 map 组件开始对应类型的绘制
      EventBus.$emit('start-drawing', { drawType });
    },
    toggleAllPayloads(value) {
      if (value) {
        this.queryForm.types = this.currentPayloadOptions.map(option => option.value);
      } else {
        this.queryForm.types = [];
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 300px;
  height: 75vh;
  background-color: #f0f0f0;
}

.el-menu {
  background-color: #f0f0f0;
  margin-bottom: 5px;
  display: flex;
}

.el-menu-item {
  flex: 1; /* 均分宽度 */
  padding: 0 8px; /* 调整左右内边距，根据需要调整数值 */
}
.wetland-select {
  width: 280px; /* 设置宽度为100% */
}
.sensor-selection {
  margin-top: 10px; /* 上方的空白 */
  margin-bottom: 15px;
}

.label {
  font-size: 16px;
  margin-bottom: 6px;

}
.el-dropdown-menu {
  min-width: 300px; /* 下拉表格的最小宽度 */
}

.el-input {
  width: 280px; /* 输入框宽度 */
}
.el-form-item {
    margin-top: 50px;
    margin-right: 20px;
    text-align: right; /* 或者 text-align: right; */
}
.draw-icons {
  margin-top: 20px; /* 调整垂直偏移量 */
}

.draw-option {
  text-align: center;
  cursor: pointer;
}

.draw-option i {
  font-size: 20px;
}

.draw-option span {
  display: block;
  font-size: 12px;
}
.el-checkbox-group {
  background-color: #ffffff; /* 替换为你想要的背景颜色 */
  padding: 10px; /* 根据需要调整内边距 */
  margin: 15px 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* 调整多选框之间的间距 */
}

.el-checkbox {
  width: 100%;
}

.sketch-button{
   background-color:#ffffff; /* 替换为你想要的背景颜色 */
   padding: 10px; /* 根据需要调整内边距 */
   margin:15px 5px;
   cursor:default;
}
.query-button {
  margin-top: 10px;
  margin-left: 200px; /* 调整上方边距，根据需要调整数值 */
}
</style>
